<template>
  <div class="blog-home">
    <header>
      <h1 class="site-title">Lade_Doing'sBLOG</h1>
    </header>

    <main>
      <section class="author-section">
        <div class="author-card">
          <img :src="author.avatar" :alt="author.name" class="author-avatar">
          <h2>{{ author.username }}</h2>
          <p>{{ author.introduce }}</p>
        </div>
      </section>

      <section class="tag-section">
        <h2>标签云</h2>
        <div class="tag-cloud">
          <span v-for="tag in tags" :key="tag" class="tag">
          <router-link :to="'/front/blogSelect/tagId?tagId='+tag.id">
            {{ tag.name }}
          </router-link>
          </span>
        </div>
      </section>

      <section class="category-section">
        <h2>分类</h2>
        <div class="category-list-container">
          <ul class="category-list">
              <li v-for="category in categories" :key="category.id" class="category-item">
                <router-link :to="'/front/blogSelect/categoryId?categoryId='+category.id">
                  {{ category.name }}
                  <template v-if="category.articles && category.articles.length > 0">
                    ({{ category.articles.length }})
                  </template>
                </router-link>
              </li>
          </ul>
        </div>
      </section>

      <section class="popular-posts-section">
        <h2>热门文章</h2>
        <ul class="popular-posts-list">
          <li v-for="post in popularPosts" :key="post.id" class="popular-post">
            <span class="post-title">{{ post.title }}</span>
            <span class="post-views">{{ post.views }} 阅读</span>
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { gsap } from 'gsap';
import { selectAllArticle } from '@/api/front/article.js'
import { selectAllCategory, selectByCategoryId } from '@/api/front/category.js'
import { selectAllTag,selectByTagId } from '@/api/front/tag.js'
import { selectByUserId } from '@/api/front/user.js'
import {useRoute} from 'vue-router';
const route = useRoute();

const {tagId,categoryId} = route.params;
console.log("tagId",tagId)
console.log("categoryId",categoryId)

const author = ref({
  name: 'Lade_Doing',
  avatar: 'https://placekitten.com/200/200',
  bio: '热爱科技和创新的全栈开发者，喜欢探索新技术和分享知识。'
});

const tags = ref(['Vue', 'React', 'JavaScript', 'CSS', 'Node.js', 'Python', 'AI', '机器学习', '前端', '后端']);

const categories = ref([
  { name: '技术博客', count: 42 },
  { name: '学习笔记', count: 28 },
  { name: '项目分享', count: 15 },
  { name: '生活随笔', count: 7 }
]);

const popularPosts = ref([
  { title: '2024年前端开发趋势', views: 15420 },
  { title: 'Vue 3 和 React 18 对比', views: 12350 },
  { title: '机器学习入门指南', views: 10980 },
  { title: 'CSS Grid 布局详解', views: 9870 },
  { title: 'Node.js 性能优化技巧', views: 8760 }
]);

const InitData = async ()=> {
  const res = await selectAllCategory();
  const res1 = await selectAllTag();
  const res2 = await selectAllArticle({pageSize: 5, pageNum: 1, sort: true});
  const res3 = await selectByUserId(1)
  console.log("res",res)
  console.log("res1",res1)
  console.log("res2",res2)
  console.log("res3",res3)
  categories.value = res.data.data;
  tags.value = res1.data.data;
  popularPosts.value = res2.data.data.list
  author.value = res3.data.data
}

onMounted(() => {
  animateElements();
  InitData();
});

const animateElements = () => {
  gsap.from('.author-card', { opacity: 0, y: 50, duration: 1 });
  gsap.from('.tag-cloud span', { opacity: 0, scale: 0.5, stagger: 0.1, duration: 0.5 });
  gsap.from('.category-item', { opacity: 0, x: -50, stagger: 0.2, duration: 0.5 });
  gsap.from('.popular-post', { opacity: 0, x: 50, stagger: 0.2, duration: 0.5 });
};
</script>

<style scoped>
.blog-home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.site-title {
  text-align: center;
  color: #2c3e50;
  font-size: 3rem;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

section {
  background-color: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

section:hover {
  transform: translateY(-5px);
}

h2 {
  color: #3498db;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.author-card {
  text-align: center;
}

.author-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 1rem;
  border: 4px solid #3498db;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background-color: #3498db;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.tag:hover {
  background-color: #2980b9;
}

.category-list-container{
  max-height: 200px; /* 设置容器最大高度 */
  overflow: hidden; /* 禁用默认的滚动条 */
}

.category-list-container:hover{
  overflow: auto;
}

.category-list {
  list-style-type: none; /* 去除列表样式 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
}

.category-item {
  margin-bottom: 10px; /* 设置项之间的间距 */
}

.category-list, .popular-posts-list {
  list-style-type: none;
  padding: 0;
}

.category-item, .popular-post {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ecf0f1;
  display: flex;
  justify-content: space-between;
}

.post-views {
  color: #7f8c8d;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
  }
}
</style>